<template>
  <view class="page-order">
    <view class="header-wrapper">
      <view class="header">
        <view class="title">{{ $t('order.我的订单') }}</view>
        <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
      </view>
      <view class="tabsbox">
        <view class="tabs">
          <view class="tabs-item" :class="{ 'is-active': v.id == status }" v-for="v in tabsList" :key="v.id" @click="handleChangeTab(v)">
            {{ v.name }}
          </view>
        </view>
      </view>
    </view>
    <view class="order-list">
      <view class="order-item" v-for="(v, i) in orderList" :key="i">
        <view class="item-top">
          <view class="item-info">
            <view class="info-title">{{ v.title }} </view>
            <view class="info-desc">{{ v.subTitle }} </view>
            <view class="info-commission">
              <view class="label">{{ $t('order.项目提成') }}:</view>
              <view class="value">{{ v.pencent }}%</view>
            </view>
          </view>
          <view class="item-btn" :class="`is-${v.status}`">{{ filterStatus(v.status) }}</view>
        </view>
        <view class="item-footer">
          <view>{{ v.money }}</view>
          <view>($)</view>
        </view>
        <view class="info-time" v-if="v.status == 1">
          <view class="label">{{ $t('order.审核日期') }}:</view>
          <view class="value">{{ v.checkDate }}</view>
        </view>
        <view class="info-time" v-else-if="v.status == 0">
          <view class="label">{{ $t('order.申请日期') }}:</view>
          <view class="value">{{ v.createdDate }}</view>
        </view>
        <view class="info-time" v-else-if="v.status == -1">
          <view class="label">{{ $t('order.审核日期') }}:</view>
          <view class="value">{{ v.checkDate }}</view>
        </view>
        <view class="info-time" v-else-if="v.status == 2">
          <view class="label">{{ $t('order.结算日期') }}:</view>
          <view class="value">{{ v.settleDate }}</view>
        </view>
      </view>
    </view>
    <uni-load-more :status="more" :contentText="{ contentdown: $t('common.上拉显示更多'), contentrefresh: $t('common.正在加载'), contentnomore: $t('common.没有更多数据了') }" @clickLoadMore="loadMore"></uni-load-more>
  </view>
</template>
<script>
  import { orderList } from '@/api/order.js'
  export default {
    onLoad(option) {
      let { type } = option
      this.status = type
    },
    onPullDownRefresh() {
      this.orderList = []
      this.page = 1
      this.more = 'more'
      this.getOrder()
      uni.stopPullDownRefresh()
    },
    data() {
      return {
        tabsList: [
          {
            name: this.$t('order.全部'),
            id: 'all'
          },
          {
            name: this.$t('order.待结算'),
            id: 1
          },
          {
            name: this.$t('order.未审核'),
            id: 0
          },
          {
            name: this.$t('order.未通过'),
            id: -1
          },
          {
            name: this.$t('order.已结算'),
            id: 2
          }
        ],
        status: '',
        orderList: [],
        more: 'more',
        page: 1,
        limit: 30
      }
    },
    methods: {
      // 返回
      handleBack() {
        // this.$tab.navigateBack()
        this.$tab.switchTab('/pages/mine/index')
      },
      // 切换tab
      handleChangeTab(item) {
        this.status = item.id
        this.page = 1
        this.more = 'more'
        this.orderList = []
        this.getOrder()
      },
      //获取订单
      getOrder() {
        this.$modal.loading('loading', 'loading')
        orderList({
          status: this.status,
          page: this.page,
          limit: this.limit
        })
          .then((res) => {
            let { list } = res.result
            let { total, records } = list
            this.orderList.push(...records)
            if (total == this.orderList.length) {
              this.more = 'noMore'
            } else {
              this.more = 'more'
            }
            this.$modal.closeLoading()
          })
          .catch((err) => {
            this.$modal.closeLoading()
          })
      },
      loadMore(e) {
        if (this.more == 'noMore') return
        this.more = 'loading'
        this.page++
        this.getOrder()
      },
      // 状态过滤
      filterStatus(status) {
        switch (status) {
          case 0:
            return this.$t('order.未审核')
          case 1:
            return this.$t('order.待结算')
          case -1:
            return this.$t('order.未通过')
          case 2:
            return this.$t('order.已结算')
        }
      }
    },
    created() {
      this.getOrder()
    }
  }
</script>
<style scoped lang="scss">
  .page-order {
    position: relative;
    .header-wrapper {
      position: fixed;
      top: 0;
      z-index: 9;
      .header {
        background-color: #31b2b5;
        text-align: center;
        height: 44px;
        line-height: 44px;
        position: relative;
        color: #fff;

        font-size: 26rpx;
        .back-icon {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          font-weight: normal;
        }
      }
      .tabsbox {
        width: 100vw;
        background-color: #31b2b5;
        overflow: hidden;
        padding: 10px 10px 0;
        .tabs {
          width: 100%;
          overflow-x: auto;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          padding-bottom: 10px;
          .tabs-item {
            height: 36px;
            border-radius: 100px;
            padding: 5px;
            display: flex;
            white-space: nowrap;
            margin-right: 10px;
            color: #fff;
            &.is-active {
              position: relative;
              transform: scale(1.1);
              &::before {
                content: '';
                position: absolute;
                bottom: -4px;
                left: 50%;
                transform: translateX(-50%);
                width: 20px;
                height: 2px;
                background-color: #101010;
              }
            }
          }
        }
      }
    }
    .order-list {
      padding: 100px 40rpx 0;

      .order-item {
        position: relative;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        .item-top {
          display: flex;
          align-items: center;
          padding: 10px 0;
          .item-info {
            flex: 1;
            overflow: hidden;
            font-size: 24rpx;
            .info-title {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #101010;

              font-size: 28rpx;
            }
            .info-desc {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #999;
              margin-top: 10rpx;
            }
            .info-commission {
              display: flex;
              align-items: center;
              margin-top: 10rpx;
              .label {
                color: #666;
              }
              .value {
                color: #d3955c;
              }
            }
          }
          .item-btn {
            height: 28px;
            line-height: 28px;
            border-radius: 10px;
            text-align: center;
            color: #fff;

            margin-left: 40rpx;
            padding: 0 20rpx;
            &.is-0 {
              background-color: #fecf77;
            }
            &.is-1 {
              background-color: #31b3b5;
            }
            &.is-2 {
              background-color: #aaaaaa;
            }
            &.is--1 {
              background-color: #ec4b41;
            }
          }
        }
        .item-footer {
          display: flex;
          justify-content: flex-end;
          margin: 10rpx 0;
          font-size: 28rpx;
          color: #d3955c;
        }
        .info-time {
          margin-top: 20rpx;
          color: #666;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 26rpx;
          .label {
            margin-right: 10px;
          }
        }
      }
    }
  }
</style>
